<%--
  Created by IntelliJ IDEA.
  User: Healer
  Date: 2021/4/2
  Time: 15:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 表单验证 jQuery Validation</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="plugins/Hplus-v.4.1.0/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="plugins/Hplus-v.4.1.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="plugins/Hplus-v.4.1.0/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="plugins/Hplus-v.4.1.0/css/animate.css" rel="stylesheet">

    <!-- Sweet Alert -->
    <link href="plugins/Hplus-v.4.1.0/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>按条件查找</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="form_basic.html#">选项1</a>
                            </li>
                            <li><a href="form_basic.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content" >
                    <form action="UserInfoQueryServlet" class="form-horizontal m-t" id="commentForm">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名：</label>
                            <div class="col-sm-3">
<%--                                //minlength="2"最小长度为2--%>
                                <input id="userName" name="userName" type="text" class="form-control" placeholder="输入一个或多个字母或汉字">
                            </div>
                            <label class="col-sm-2 control-label">联系电话：</label>
                            <div class="col-sm-3">
                                <input id="phone"  type="text" class="form-control" name="phone" placeholder="请输入一位或多位号码"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">注册日期：</label>
                            <div class="col-sm-3">
                                <input id="userDate" name="userDate" class="form-control layer-date" placeholder="选择注册日期时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                                <label class="laydate-icon"></label>
                            </div>
                            <div class="col-sm-2">
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_
                            </div>
                            <div class="col-sm-3">
                                <input id="userDate2" name="userDate2" class="form-control layer-date" placeholder="选择注册日期时间" onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm:ss'})">
                                <label class="laydate-icon"></label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-5 control-label"></label>
                            <div class="col-sm-5 col-sm-offset-5">
<%--                                <button class="btn btn-success btn-primary demo1" type="submit">添加</button>--%>
                                    <button class="btn btn-primary" type="reset">重置</button>
                                    <button class="btn btn-primary" type="submit" >查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>按姓名查找</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="form_basic.html#">选项1</a>
                            </li>
                            <li><a href="form_basic.html#">选项2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content" >
                    <form action="UserNameQueryServlet" class="form-horizontal m-t" >
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名：</label>
                            <div class="col-sm-3">
                                <%--                                //minlength="2"最小长度为2--%>
                                <input id="userName2" name="userName2" type="text" class="form-control"
                                       placeholder="输入用户名">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-5 control-label"></label>
                            <div class="col-sm-5 col-sm-offset-5">
                                <%--                                <button class="btn btn-success btn-primary demo1" type="submit">添加</button>--%>
                                <button class="btn btn-primary" type="reset">重置</button>
                                <button class="btn btn-primary" type="submit" >查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 全局js -->
<script src="plugins/Hplus-v.4.1.0/js/jquery.min.js?v=2.1.4"></script>
<script src="plugins/Hplus-v.4.1.0/js/bootstrap.min.js?v=3.3.6"></script>

<!-- 自定义js -->
<script src="plugins/Hplus-v.4.1.0/js/content.js?v=1.0.0"></script>

<!-- jQuery Validation plugin javascript-->
<script src="plugins/Hplus-v.4.1.0/js/plugins/validate/jquery.validate.min.js"></script>
<script src="plugins/Hplus-v.4.1.0/js/plugins/validate/messages_zh.min.js"></script>

<script src="plugins/Hplus-v.4.1.0/js/demo/form-validate-demo.js"></script>


<!-- layerDate plugin javascript -->
<script src="plugins/Hplus-v.4.1.0/js/plugins/layer/laydate/laydate.js"></script>
<script>
    //外部js调用
    laydate({
        elem: '#hello', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
        event: 'focus' //响应事件。如果没有传入event，则按照默认的click
    });

    //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16 23:59:59', //最大日期
        istime: true,
        istoday: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD hh:mm:ss',
        min: laydate.now(),
        max: '2099-06-16 23:59:59',
        istime: true,
        istoday: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
    laydate(start);
    laydate(end);
</script>

</body>

</html>
